<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>websocket通信客户端</title>
    <style>
      .mpld3-toolbar {
        display: none;
      }
      .mpld3-xaxis {
        display: none;
      }
      .mpld3-yaxis {
        display: none;
      }
    </style>
  </head>

  <body>
    <script src="d3.min.js"></script>
    <script src="mpld3.v0.1.js"></script>
    <script src="jquery.min.js"></script>
    <div id="draw_region_app1"></div>
    <script type="text/javascript">
      function websocket_init(port, draw_region_id) {
        let uri = "ws://127.0.0.1:" + port;
        var ws = new WebSocket(uri);

        ws.onopen = function () {
          console.log("websocket connected to " + uri);
        };

        ws.onmessage = function (evt) {
          var received_msg = evt.data;
          $("#" + draw_region_id).empty();
          mpld3.draw_figure(draw_region_id, JSON.parse(received_msg));
        };

        ws.onclose = function () {
          console.log("websocket closed " + uri);
        };
      }
      websocket_init(8801, "draw_region_app1");
    </script>
  </body>
</html>
